<script setup lang="ts">
import { ref } from 'vue'

//v-model 绑定的输入框 获取输入的值
//双向绑定：
//数据改变--》同步修改表单元素
//表单元素改变--》同步数据
const username = ref('')
const password = ref('')

// 绑定的是选择框，获取的是 布尔值
const isChecked = ref(true)

const login = () => {
  if (isChecked.value) {
    console.log(username.value, password.value)
  } else {
    alert('请同意哦~')
  }
}
const reset = () => {
  username.value = ''
  password.value = ''
}
</script>


<template>
   <div id="app">
    账户：<input v-model="username" type="text"> <br><br>
    密码：<input v-model="password" type="password"> <br><br>
    <input v-model="isChecked" type="checkbox">
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
</template>

<style></style>